<!-- 个人信息详情页 -->

<script setup lang="ts">
import { onMounted, watch } from 'vue';
import { ref } from 'vue'
import service from '@/utils/axios';
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '@/stores/useUserStore';
import { stringToApiResponse } from '@/types/apiResponse';
import type { PersonalInfo, UserNews, UserBlog, FollowUser, FollowIssue, FollowSection } from '@/types/UserDetails'
import { useLoginStore } from '@/stores/useLoginStore';

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
const loginStore = useLoginStore()

// 被访问个人信息的用户的ID
const visitedUserId = Number(route.params.id);
// 查看的用户信息是否为当前登录用户
const isSelf = ref(false);

// 用户基本信息
const userInfo = ref<PersonalInfo>({
  id: visitedUserId,
  name: '',
  avatar: '',
  cover: '', // 添加封面图
  headline: '',
  gender: 0,
  followedIf: false,
  location: '',
  industry: '',
  company: '',
  position: '',
  education: '',
  major: '',
  description: '',
  stats: {
    articles: 0,
    beLikes: 0,
    beCollections: 0,

    followers: 0,
    following: 0,
    
    likeIssues: 0,
    likeSections: 0,
    newsCollections: 0
  }
})

// 博客列表（我的博客）
const myBlogs = ref<UserBlog[]>([
  {
    id: 0,
    title: '',
    content: '',
    voteCount: 0,
    createdTime: ''
  }
])

// 博客列表（最近点赞）
const recentLikeBlogs = ref<UserBlog[]>([
  {
    id: 0,
    title: '',
    content: '',
    voteCount: 0,
    createdTime: ''
  }
])

// 博客列表（最近收藏）
const recentFavoBlogs = ref<UserBlog[]>([
  {
    id: 0,
    title: '',
    content: '',
    voteCount: 0,
    createdTime: ''
  }
])


// 新闻列表（我的新闻）
const myNewss = ref<UserNews[]>([
  {
    id: 0,
    title: '',
    content: '',
    voteCount: 0,
    createdTime: ''
  }
])

// 新闻列表（最近点赞）
const recentLikeNewss = ref<UserNews[]>([
  {
    id: 0,
    title: '',
    content: '',
    voteCount: 0,
    createdTime: ''
  }
])

// 新闻列表（最近收藏）
const recentFavoNewss = ref<UserNews[]>([
  {
    id: 0,
    title: '',
    content: '',
    voteCount: 0,
    createdTime: ''
  }
])

// 关注的用户列表
const followUsers = ref<FollowUser[]>([
  {
    id: 0,
    name: '',
    avatar: '',
    headline: '',
    followers: 0
  }
])

// 关注的话题
const followIssues = ref<FollowIssue[]>([
  {
    id: 0,
    name: '',
    description: '',
    newsCount: 0,
    blogCount: 0,
    followers: 0
  }
])

// 关注的论坛版块
const followSections = ref<FollowSection[]>([
  {
    id: 0,
    name: '',
    description: '',
    blogCount: 0,
    followers: 0,
    icon: 'fa fa-comments-o fa-2x',
    bgColor: 'bg-blue-100',
    iconColor: 'text-red-500'
  }
])

// 提示信息
const doPrompt = (message: string) => {
  ElMessage.warning({
    message: message,
    appendTo: '#top-nav'
  })
}

// 当前激活的标签页
const activeTab = ref('news')

// 当前激活的子标签页
const activeSubTab = ref('news')

// 收藏标签页
const collectionsActiveTab = ref('news')

// 关注标签页
const followActiveTab = ref('users')

// 获取用户基本信息功能接口
const getUserInfo = async (userId: number) => {
  const response = await service.get<string>(('/user/getUserInfo'), {
    params: {
      visitedUserId: userId
    }
  })

  return stringToApiResponse(response.data);
}

// 获取用户属性信息功能接口
const getUserPropertyInfo = async (userId: number) => {
  const response = await service.get<string>(('/user/getPropertyInfo'), { 
    params: { 
      visitedUserId: userId 
    } 
  })

  return stringToApiResponse(response.data);
}

// 加载用户信息的方法，接受一个userId作为被访问的用户ID。当页面加载时或者路由参数变化时调用该方法
const loadUserInfo = async (userId: number) => {
  console.log('load userinfo, userId:', userId);
  // 获取用户信息并渲染到页面上
  const apiResponse = await getUserInfo(userId);
  if (apiResponse.code === 200) {
    userInfo.value = apiResponse.data.personalInfo;
    // 下面是后端暂未实现的字段，模拟数值
    userInfo.value.location = '广东';
    userInfo.value.industry = '互联网';
    userInfo.value.company = 'Tencent';

  } else if (apiResponse.code === 404) {
    doPrompt(apiResponse.data);
  } else if (apiResponse.code === 401) {
    doPrompt('请先登录');
    loginStore.openLoginDialog();
  }
}

const loadUserPropertyInfo = async (userId: number) => {
  console.log('load user property info, userId:', userId);
  
  const apiResponse = await getUserPropertyInfo(userId);
  if (apiResponse.code === 200) {
    // 加载用户属性信息，如关注列表、收藏列表等
    myNewss.value = apiResponse.data.myNewss;
    recentLikeNewss.value = apiResponse.data.recentLikeNewss;
    recentFavoNewss.value = apiResponse.data.recentFavoNewss;
    myBlogs.value = apiResponse.data.myBlogs;
    recentLikeBlogs.value = apiResponse.data.recentLikeBlogs;
    recentFavoBlogs.value = apiResponse.data.recentFavoBlogs;
    followUsers.value = apiResponse.data.followUsers;
    followIssues.value = apiResponse.data.followIssues;
    followSections.value = apiResponse.data.followSections;
  } else {
    console.log('获取用户属性信息失败:', apiResponse.data);
  }
}

// 当页面加载时，加载用户信息
onMounted(() => {
  if (visitedUserId === Number(userStore.userInfo.id)) {
    isSelf.value = true;
  }
  // console.log('当前是否为登录用户的个人信息页:', isSelf.value);
  loadUserInfo(visitedUserId);
  // 加载用户属性信息，如关注列表、收藏列表等
  loadUserPropertyInfo(visitedUserId);
})

// 当路由参数变化时，重新加载页面
watch(() => route.params.id, () => {
  window.location.reload();
})

// 点击新闻分类
const handleNewsClick = (category: any) => {
  console.log('点击新闻分类:', category)
  // TODO: 跳转到新闻分类详情页
}

// 点击论坛话题
const handleForumClick = (category: any) => {
  console.log('点击论坛话题:', category)
  // TODO: 跳转到论坛话题详情页
}

// 跳转到个人信息编辑页面
const handleEdit = () => {
  router.push('/user/profile/edit')
}

// 跳转到编辑博客页面
const handleEditBlog = (blog: any) => {
  router.push({
    path: '/edit/blog',
    query: {
      type: 'blog',
      id: blog.id
    }
  })
}

// 跳转到编辑新闻页面
const handleEditNews = (news: any) => {
  router.push({
    path: '/edit/news',
    query: {
      id: news.id
    }
  })
}

// 跳转到新闻详情页
const goToNewsDetail = (newsId: number) => {
  router.push(`/newsArticle/${newsId}`)
}

// 跳转到博客详情页
const goToBlogDetail = (blogId: number) => { 
  router.push(`/blogArticle/${blogId}`)
}

// 关注功能接口, 接收作者ID作参数
const userFollow = async (userId: number) => {
  const response = await service.get<string>('/user/follow', {
    params: {
      followedUserId: userId
    }
  });
  return stringToApiResponse(response.data);
}

// 关注作者功能
const handleAuthorFollow = async (authorId: number) => {

  const apiResponse = await userFollow(authorId);

  if (apiResponse.code === 200) {
    doPrompt(apiResponse.data);
    // 关注操作标识取反
    userInfo.value.followedIf = !userInfo.value.followedIf;
  } else if (apiResponse.code === 400) {
    doPrompt(apiResponse.data);
  } else if (apiResponse.code === 401) {
    doPrompt('请先登录');
    loginStore.openLoginDialog();
  }
}

// 访问用户个人主页
const handleUserProfile = (authorId: number) => {
  router.push({
    path: `/user/profile/${authorId}`,
  })
}
</script>

<template>
  <div class="bg-[#f6f6f6] min-h-screen">
    <div class="max-w-[1000px] mx-auto py-4 px-5">
      <!-- 个人信息卡片 -->
      <div class="bg-white rounded-lg mb-4">
        <div class="relative">
          <!-- 封面图 -->
          <div v-if="!userInfo.cover" class="h-[240px] w-full overflow-hidden rounded-t-lg" style="background-color: #d3d3d3;">
            <img class="w-full h-full object-cover" alt="" />
          </div>
          <div v-else class="h-[240px] w-full overflow-hidden rounded-t-lg">
            <img :src="userInfo.cover" class="w-full h-full object-cover" alt="" />
          </div>
          <!-- 头像和个人信息 -->
          <div class="px-6">
            <div class="relative flex items-start">
              <!-- 头像定位在封面左下角,突出一部分 -->
              <div class="absolute -top-8">
                <el-avatar :size="120" :src="userInfo.avatar" class="rounded-lg border-4 border-white" />
              </div>
              <!-- 个人信息右移,为头像留出空间 -->
              <div class="ml-[140px] flex-1 py-6">
                <div class="flex justify-between items-start">
                  <div>
                    <h1 class="text-[24px] font-medium text-[#121212] mb-2">
                      {{ userInfo.name }}
                    </h1>
                    <p class="text-[15px] text-[#646464] mb-4">
                      {{ userInfo.headline }}
                    </p>
                    <div class="flex items-center text-[14px] text-[#8590a6] space-x-5">
                      <span v-if="userInfo.gender === 1" class="flex items-center">男</span>
                      <span v-if="userInfo.gender === 2" class="flex items-center">女</span>
                      <span class="flex items-center">
                        <el-icon class="mr-1">
                          <Location />
                        </el-icon>
                        {{ userInfo.location }}
                      </span>
                      <span class="flex items-center">
                        <el-icon class="mr-1">
                          <Suitcase />
                        </el-icon>
                        {{ userInfo.industry }}
                      </span>
                      <span class="flex items-center">
                        <el-icon class="mr-1">
                          <Briefcase />
                        </el-icon>
                        {{ userInfo.company }}
                      </span>
                    </div>
                  </div>
                  <div class="flex space-x-3">
                    <el-button v-if="isSelf" type="primary" @click="handleEdit">
                      编辑个人资料
                    </el-button>
                    <div v-else>
                      <el-button v-if="!userInfo.followedIf" type="primary" class="w-full"
                        @click="handleAuthorFollow(userInfo.id)">关注</el-button>
                      <el-button v-else type="default" class="w-full"
                        @click="handleAuthorFollow(userInfo.id)">已关注</el-button>
                    </div>
                    
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 内容区域 -->
      <div class="flex">
        <!-- 左侧内容 -->
        <div class="flex-1 mr-5">
          <div class="bg-white rounded-lg px-4 py-3">
            <el-tabs v-model="activeTab" class="">

              <!-- 查看自己的个人信息时渲染 -->
              <el-tab-pane v-if="isSelf" label="我的新闻" name="news">
                <div class="divide-y">
                  <div v-if="myNewss.length !== 0" v-for="news in myNewss" :key="news.id" class="p-5 hover:bg-gray-50 cursor-pointer"
                    @click="handleEditNews(news)">
                    <h3 class="text-lg font-medium mb-2 text-[#121212]">
                      {{ news.title }}
                    </h3>
                    <p class="text-[15px] text-[#646464] mb-3">
                      {{ news.content }}
                    </p>
                    <div class="flex items-center text-[14px] text-[#8590a6] space-x-6">
                      <span>发布于 {{ news.createdTime }}</span>
                      <span>{{ news.voteCount }} 赞同</span>
                    </div>
                  </div>
                  <div v-else>
                    <el-empty description="暂无内容" />
                  </div>
                </div>
              </el-tab-pane>

              <!-- 查看别人的个人信息时渲染 -->
              <el-tab-pane v-else label="TA的新闻" name="news">
                <div class="divide-y">
                  <div v-if="myNewss.length !== 0" v-for="news in myNewss" :key="news.id" class="p-5 hover:bg-gray-50 cursor-pointer"
                    @click="goToNewsDetail(news.id)">
                    <h3 class="text-lg font-medium mb-2 text-[#121212]">
                      {{ news.title }}
                    </h3>
                    <p class="text-[15px] text-[#646464] mb-3">
                      {{ news.content }}
                    </p>
                    <div class="flex items-center text-[14px] text-[#8590a6] space-x-6">
                      <span>发布于 {{ news.createdTime }}</span>
                      <span>{{ news.voteCount }} 赞同</span>
                    </div>
                  </div>
                  <div v-else>
                    <el-empty description="暂无内容" />
                  </div>
                </div>
              </el-tab-pane>

              <!-- 查看自己的个人信息时渲染 -->
              <el-tab-pane v-if="isSelf" label="我的博客" name="blog">
                <div class="divide-y">
                  <div v-if="myBlogs.length !== 0" v-for="blog in myBlogs" :key="blog.id" class="p-5 hover:bg-gray-50 cursor-pointer"
                    @click="handleEditBlog(blog)">
                    <h3 class="text-lg font-medium mb-2 text-[#121212]">
                      {{ blog.title }}
                    </h3>
                    <p class="text-[15px] text-[#646464] mb-3 line-clamp-3">
                      {{ blog.content }}
                    </p>
                    <div class="flex items-center text-[14px] text-[#8590a6] space-x-6">
                      <span>编辑于 {{ blog.createdTime }}</span>
                      <span>{{ blog.voteCount }} 赞同</span>
                    </div>
                  </div>
                  <div v-else>
                    <el-empty description="暂无内容" />
                  </div>
                </div>
              </el-tab-pane>

              <!-- 查看别人的个人信息时渲染 -->
              <el-tab-pane v-else label="TA的博客" name="blog">
                <div class="divide-y">
                  <div v-if="myBlogs.length !== 0" v-for="blog in myBlogs" :key="blog.id" class="p-5 hover:bg-gray-50 cursor-pointer"
                    @click="goToBlogDetail(blog.id)">
                    <h3 class="text-lg font-medium mb-2 text-[#121212]">
                      {{ blog.title }}
                    </h3>
                    <p class="text-[15px] text-[#646464] mb-3 line-clamp-3">
                      {{ blog.content }}
                    </p>
                    <div class="flex items-center text-[14px] text-[#8590a6] space-x-6">
                      <span>编辑于 {{ blog.createdTime }}</span>
                      <span>{{ blog.voteCount }} 赞同</span>
                    </div>
                  </div>
                  <div v-else>
                    <el-empty description="暂无内容" />
                  </div>
                </div>
              </el-tab-pane>

              <el-tab-pane v-if="isSelf" label="最近点赞" name="collections">
                <el-tabs v-model="activeSubTab">
                  <el-tab-pane label="新闻" name="news">
                    <div class="divide-y">
                      <div v-if="recentLikeNewss.length !== 0" v-for="news in recentLikeNewss" :key="news.id" class="p-5 hover:bg-gray-50" @click="goToNewsDetail(news.id)">
                        <h3 class="text-lg font-medium mb-2 text-[#121212]">
                          {{ news.title }}
                        </h3>
                        <p class="text-[15px] text-[#646464] mb-3">
                          {{ news.content }}
                        </p>
                        <div class="flex items-center text-[14px] text-[#8590a6] space-x-6">
                          <span>发布于 {{ news.createdTime }}</span>
                          <span>{{ news.voteCount }} 赞同</span>
                        </div>
                      </div>
                      <div v-else>
                        <el-empty description="暂无内容" />
                      </div>
                    </div>
                  </el-tab-pane>

                  <el-tab-pane label="博客" name="blog">
                    <div class="divide-y">
                      <div v-if="recentLikeBlogs.length !== 0" v-for="blog in recentLikeBlogs" :key="blog.id" class="p-5 hover:bg-gray-50" @click="goToBlogDetail(blog.id)">
                        <h3 class="text-lg font-medium mb-2 text-[#121212]">
                          {{ blog.title }}
                        </h3>
                        <p class="text-[15px] text-[#646464] mb-3">
                          {{ blog.content }}
                        </p>
                        <div class="flex items-center text-[14px] text-[#8590a6] space-x-6">
                          <span>编辑于 {{ blog.createdTime }}</span>
                          <span>{{ blog.voteCount }} 赞同</span>
                        </div>
                      </div>
                      <div v-else>
                        <el-empty description="暂无内容" />
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </el-tab-pane>

              <el-tab-pane v-if="isSelf" label="我的收藏" name="followedNewsCategories">
                <el-tabs v-model="collectionsActiveTab">
                  <el-tab-pane label="收藏新闻" name="news">
                    <div class="divide-y">
                      <div v-if="recentFavoNewss.length !== 0" v-for="news in recentFavoNewss" :key="news.id" class="p-5 hover:bg-gray-50" @click="goToNewsDetail(news.id)">
                        <h3 class="text-lg font-medium mb-2 text-[#121212]">
                          {{ news.title }}
                        </h3>
                        <p class="text-[15px] text-[#646464] mb-3">
                          {{ news.content }}
                        </p>
                        <div class="flex items-center text-[14px] text-[#8590a6] space-x-6">
                          <span>发布于 {{ news.createdTime }}</span>
                          <span>{{ news.voteCount }} 赞同</span>
                        </div>
                      </div>
                      <div v-else>
                        <el-empty description="暂无内容" />
                      </div>
                    </div>
                  </el-tab-pane>

                  <el-tab-pane label="收藏博客" name="blog">
                    <div class="divide-y">
                      <div v-if="recentFavoBlogs.length !== 0" v-for="blog in recentFavoBlogs" :key="blog.id" class="p-5 hover:bg-gray-50" @click="goToBlogDetail(blog.id)">
                        <h3 class="text-lg font-medium mb-2 text-[#121212]">
                          {{ blog.title }}
                        </h3>
                        <p class="text-[15px] text-[#646464] mb-3">
                          {{ blog.content }}
                        </p>
                        <div class="flex items-center text-[14px] text-[#8590a6] space-x-6">
                          <span>编辑于 {{ blog.createdTime }}</span>
                          <span>{{ blog.voteCount }} 赞同</span>
                        </div>
                      </div>
                      <div v-else>
                        <el-empty description="暂无内容" />
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </el-tab-pane>

              <el-tab-pane v-if="isSelf" label="我的关注" name="followedForumCategories">
                <el-tabs v-model="followActiveTab">
                  <el-tab-pane label="用户" name="users">
                    <div class="divide-y">
                      <div v-if="followUsers.length !== 0" v-for="user in followUsers" :key="user.id" class="p-5 hover:bg-gray-50 cursor-pointer">
                        <div class="flex items-start" @click="handleUserProfile(user.id)">
                          <el-avatar :size="48" :src="user.avatar" class="rounded-lg" />
                          <div class="ml-4 flex-1">
                            <h3 class="text-lg font-medium mb-2 text-[#121212]">
                              {{ user.name }}
                            </h3>
                            <p class="text-[15px] text-[#646464] mb-3">
                              {{ user.headline }}
                            </p>
                            <div class="flex items-center text-[14px] text-[#8590a6]">
                              <span>{{ user.followers }} 关注者</span>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div v-else>
                        <el-empty description="暂无内容" />
                      </div>
                    </div>
                  </el-tab-pane>

                  <el-tab-pane label="话题" name="news">
                    <div class="divide-y">
                      <div v-if="followIssues.length !== 0" v-for="category in followIssues" :key="category.id"
                        class="p-5 hover:bg-gray-50 cursor-pointer" @click="handleNewsClick(category)">
                        <h3 class="text-lg font-medium mb-2 text-[#121212] flex items-center">
                          <span class="text-blue-500 mr-1 text-xl">#</span>
                          <span class="hover:text-blue-500 transition-colors duration-300">{{ category.name }}</span>
                        </h3>
                        <p class="text-[15px] text-[#646464] mb-3">
                          {{ category.description }}
                        </p>
                        <div class="flex items-center text-[14px] text-[#8590a6] space-x-6">
                          <span>{{ category.newsCount }} 篇新闻</span>
                          <span>{{ category.blogCount }} 篇博客</span>
                          <span>{{ category.followers }} 人关注</span>
                        </div>
                      </div>
                      <div v-else>
                        <el-empty description="暂无内容" />
                      </div>
                    </div>
                  </el-tab-pane>

                  <el-tab-pane label="论坛版块" name="forum">
                    <div class="divide-y">
                      <div v-if="followSections.length !== 0" v-for="category in followSections" :key="category.id"
                        class="p-5 hover:bg-gray-50 cursor-pointer" @click="handleForumClick(category)">
                        <div class="flex items-start gap-4">
                          <!-- 图标 -->
                          <div :class="[
                            category.bgColor,
                            'w-12 h-12 rounded-lg flex items-center justify-center'
                          ]">
                            <i :class="[category.icon, 'text-2xl']"></i>
                          </div>

                          <!-- 内容 -->
                          <div class="flex-1 min-w-0">
                            <h3 class="text-lg font-medium mb-2 text-[#121212]">
                              {{ category.name }}
                            </h3>
                            <p class="text-[15px] text-[#646464] mb-3">
                              {{ category.description }}
                            </p>
                            <div class="flex items-center text-[14px] text-[#8590a6] space-x-6">
                              <span>{{ category.blogCount }} 个帖子</span>
                              <span>{{ category.followers }} 人关注</span>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div v-else>
                        <el-empty description="暂无内容" />
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>

        <!-- 右侧信息 -->
        <div class="w-[296px]">
          <div class="bg-white rounded-lg p-5">
            <h3 class="text-[15px] font-medium mb-3">个人成就</h3>
            <div class="space-y-3">
              <div class="flex items-center">
                <el-icon class="text-[#056de8] mr-2">
                  <Edit />
                </el-icon>
                <span class="text-[14px] text-[#646464]">编辑文章数 {{ userInfo.stats.articles }} </span>
              </div>
              <div class="flex items-center">
                <el-icon class="text-[#056de8] mr-2">
                  <CaretTop />
                </el-icon>
                <span class="text-[14px] text-[#646464]">获得 {{ userInfo.stats.beLikes }} 次赞同</span>
              </div>

              <div class="flex items-center">
                <el-icon class="text-[#056de8] mr-2">
                  <Star />
                </el-icon>
                <span class="text-[14px] text-[#646464]">获得 {{ userInfo.stats.beCollections }} 次收藏</span>
              </div>
            </div>
          </div>
          <div class="bg-white rounded-lg p-5 mt-4">
            <h3 class="text-[15px] font-medium mb-3">关注统计</h3>
            <div class="space-y-3">
              <div class="flex items-center">
                <el-icon class="text-[#056de8] mr-2">
                  <UserFilled />
                </el-icon>
                <span class="text-[14px] text-[#646464]">{{ userInfo.stats.followers }} 位关注者</span>
              </div>
              <div class="flex items-center">
                <el-icon class="text-[#056de8] mr-2">
                  <Plus />
                </el-icon>
                <span class="text-[14px] text-[#646464]">关注了 {{ userInfo.stats.following }} 人</span>
              </div>
            </div>
          </div>
          <div class="bg-white rounded-lg p-5 mt-4">
            <h3 v-if="isSelf" class="text-[15px] font-medium mb-3">我的关注</h3>
            <h3 v-else class="text-[15px] font-medium mb-3">TA的关注</h3>
            <div class="space-y-3">
              <div class="flex items-center">
                <el-icon class="text-[#056de8] mr-2">
                  <Document />
                </el-icon>
                <span class="text-[14px] text-[#646464]">关注了 {{ userInfo.stats.likeIssues }} 个热门话题</span>
              </div>
              <div class="flex items-center">
                <el-icon class="text-[#056de8] mr-2">
                  <ChatDotRound />
                </el-icon>
                <span class="text-[14px] text-[#646464]">关注了 {{ userInfo.stats.likeSections }} 个论坛版块</span>
              </div>
              <div class="flex items-center">
                <el-icon class="text-[#056de8] mr-2">
                  <Collection />
                </el-icon>
                <span class="text-[14px] text-[#646464]">收藏了 {{ userInfo.stats.newsCollections }} 篇新闻</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
:deep(.el-tabs__nav-wrap::after) {
  height: 1px;
  background-color: #f0f2f5;
}

:deep(.el-tabs__active-bar) {
  background-color: #056de8;
}

:deep(.el-tabs__item) {
  font-size: 16px;
  padding: 0 24px;

  &.is-active {
    color: #056de8;
    font-weight: 500;
  }

  &:hover {
    color: #056de8;
  }
}

.el-button--primary {
  --el-button-bg-color: #056de8;
  --el-button-border-color: #056de8;
  --el-button-hover-bg-color: #0461cf;
  --el-button-hover-border-color: #0461cf;
}

.el-button--primary.is-plain {
  --el-button-text-color: #056de8;
  --el-button-bg-color: #edf4fe;
  --el-button-border-color: #056de8;
  --el-button-hover-text-color: #fff;
  --el-button-hover-bg-color: #056de8;
  --el-button-hover-border-color: #056de8;
}
</style>
